<template>
    <div class="task_job_dialog_container">
        <el-form ref="taskJobDialogForm" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="编号" prop="code">
                <el-input v-model="form.code" autocomplete="off" clearable
                          placeholder="请输入编号" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" autocomplete="off" clearable
                          placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="任务类型" prop="task_type">
                <el-select v-model="form.task_type" placeholder="请选择任务类型">
                    <el-option v-for="(item, index) in TaskTypeOptions" :key="index"
                               :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="间隔（ms)" prop="interval_time" v-if="form.task_type === 0">
                <el-input v-model="form.interval_time" autocomplete="off" type="number" />
            </el-form-item>
            <el-form-item label="cron表达式" prop="cron_clause" v-if="form.task_type === 1" class="cron_clause">
                <cron-input v-model="form.cron_clause" @change="changeCron" @reset="resetCron" />
            </el-form-item>
            <el-form-item label="目标Bean名称" prop="job_object_name">
                <el-select v-model="form.job_object_name" clearable filterable
                           placeholder="请选择目标Bean名称" style="width: 100%;"
                           @change="handleChangeObject">
                    <el-option v-for="(item, index) in objectList" :key="index"
                               :label="item.object_name" :value="item.object_name">
                        <span style="float: left">{{ item.object_name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.object_desc }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="目标方法名" prop="job_method_name">
                <el-select v-model="form.job_method_name" clearable filterable
                           placeholder="请选择目标方法名" style="width: 100%;"
                           :disabled="!$utils.isNotEmptyList(methodList)">
                    <el-option v-for="(item, index) in methodList" :key="index"
                               :label="item.method_name" :value="item.method_name">
                        <span style="float: left">{{ item.method_name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.method_desc }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import CronInput from '@hubary/vue-cron-generator/src/components/cron-input.vue';
import { DEFAULT_CRON_EXPRESSION } from '@hubary/vue-cron-generator/src/constant/filed';

export default {
    name: 'TaskJobDialog',
    components: { CronInput },
    props: {
        propsData: {
            type: Object,
            default() {
                return {
                    init: true,
                };
            },
        },
    },
    data() {
        return {
            form: {
                code: "",
                name: "",
                task_type: 1,
                interval_time: 60000,
                cron_clause: DEFAULT_CRON_EXPRESSION,
                job_object_name: "",
                job_method_name: "",
                state: 0,
            },
            TaskTypeOptions: [
                {
                    value: 0,
                    label: "simple",
                },
                {
                    value: 1,
                    label: "cron",
                },
            ],
            rules: {
                code: [
                    { required: true, message: "请输入编号", trigger: "blur" },
                    {
                        max: 50,
                        message: "最大 50位字符，内容过长，请删减",
                        trigger: "blur",
                    },
                ],
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                    {
                        max: 50,
                        message: "最大 50 位字符，内容过长，请删减",
                        trigger: "blur",
                    },
                ],
                task_type: [
                    { required: true, message: "请选择任务类型", trigger: "blur" },
                ],
                interval_time: [
                    { required: true, message: "请输入间隔时长", trigger: "blur" },
                ],
                cron_clause: [
                    { required: true, message: "请输入cron表达式", trigger: "blur" },
                ],
                job_object_name: [
                    { required: true, message: "请输入目标类名", trigger: "blur" },
                ],
                job_method_name: [
                    { required: true, message: "请输入目标方法名", trigger: "blur" },
                ],
            },
            objectList: [],
            methodList: [],
        };
    },
    watch: {
        propsData: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init() {
            if (this.propsData.init) {
                return;
            }
            this.form = $.extend({}, this.propsData.row);
            await this.initObjectAndMethodList();
            if (this.$utils.isNotEmpty(this.form.job_object_name)) {
                this.handleChangeObject(this.form.job_object_name, true);
            }
        },
        changeCron(cron) {
            this.form = $.extend({}, this.form, {
                cron_clause: cron,
            });
        },
        resetCron() {
            this.form = $.extend({}, this.form, {
                cron_clause: DEFAULT_CRON_EXPRESSION,
            });
        },
        initObjectAndMethodList() {
            let $this = this;
            return $this.fetchData($this.$api.API_GetJobObjectAndMethodList).then(result => {
                $this.objectList = result.data || [];
            }).catch(() => {
            });
        },
        handleChangeObject(value, init) {
            if (!init) {
                delete this.form.job_method_name;
            }
            delete this.form.job_object_name;
            if (this.$utils.isNotEmpty(value)) {
                let filter = this.objectList.filter(item => item.object_name === value);
                if (this.$utils.isNotEmptyList(filter)) {
                    this.methodList = filter[0].methods;
                    this.form = $.extend({}, this.form, {
                        job_object_name: filter[0].object_name,
                        mode: filter[0].mode,
                    });
                } else {
                    this.methodList = [];
                }
            } else {
                this.methodList = [];
            }
        },
        //保存/更新
        async saveOrUpdate() {
            let $this = this;
            let valid = await $this.validateForm('taskJobDialogForm');
            if (valid) {
                let subData = $.extend({}, $this.form);
                return $this.fetchData($this.$api.API_SaveSysTaskJob, subData).then(() => {
                    $this.$message.success('保存成功！');
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.task_job_dialog_container {
    .el-select {
        display: block;

        .el-input__inner {
            width: 100%;
        }
    }

    .cron_clause {
        /deep/.el-input-group__append {
            padding: 0 15px;
            text-align: center;
        }
    }
}
</style>
